<template>
  <div class="indirect-emissions-page">

    <!-- 间接排放概述 -->
    <section class="overview">
      <p>本区域用于展示和管理企业或区域的间接温室气体排放数据，包括但不限于供应链、使用阶段以及其它非直接控制的排放源。</p>
    </section>

    <!-- 间接排放分类表格 -->
    <section class="emissions-categories-table">
      <h2>间接排放类别列表</h2>
      <el-table :data="indirectEmissions" style="width: 100%">
        <el-table-column prop="category" label="排放类别" width="300"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="emissionAmount" label="排放总量（t CO2e）" width="200"></el-table-column>
        <el-table-column prop="source" label="数据来源"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="editEmissionCategory(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="viewDetails(scope.row)" type="text" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <!-- 间接排放详细信息模态框 -->
    <el-dialog title="间接排放详细信息" :visible.sync="detailModalVisible" width="80%">
      <el-form ref="detailForm" :model="currentDetail">
        <!-- 表单内容根据实际需求填充，例如： -->
        <el-form-item label="排放类别">
          <span>{{ currentDetail.category }}</span>
        </el-form-item>
        <el-form-item label="具体排放源">
          <el-input v-model="currentDetail.sourceDescription"></el-input>
        </el-form-item>
        <el-form-item label="排放量计算方法">
          <el-input type="textarea" v-model="currentDetail.calculationMethod"></el-input>
        </el-form-item>
        <el-form-item label="排放因子及说明">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="排放因子">
                <el-input v-model="currentDetail.emissionFactor"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="因子说明">
                <el-input v-model="currentDetail.factorExplanation"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 更多表单项目... -->
        <el-form-item>
          <el-button type="primary" @click="saveDetails">保存更改</el-button>
          <el-button @click="closeDetailsModal">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    
    <!-- 新增或编辑间接排放类别模态框 -->
    <el-dialog title="编辑/新增排放类别" :visible.sync="editModalVisible" width="50%">
  <el-form ref="editForm" :model="currentEditItem" label-width="100px" :rules="formRules">
    <el-form-item label="排放类别" prop="category">
      <el-input v-model="currentEditItem.category"></el-input>
    </el-form-item>
    
    <el-form-item label="描述" prop="description">
      <el-input type="textarea" autosize v-model="currentEditItem.description"></el-input>
    </el-form-item>

    <el-form-item label="排放总量（t CO2e）" prop="emissionAmount">
      <el-input-number v-model="currentEditItem.emissionAmount" controls-position="right" :min="0"></el-input-number>
    </el-form-item>

    <el-form-item label="数据来源" prop="source">
      <el-input v-model="currentEditItem.source"></el-input>
    </el-form-item>

    <!-- 更多与间接排放相关的表单字段... -->

    <el-form-item>
      <el-button type="primary" @click="submitEditForm">保存</el-button>
      <el-button @click="closeEditModal">取消</el-button>
    </el-form-item>
  </el-form>
</el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editModalVisible: false,
      currentEditItem: {
        category: '',
        description: '',
        emissionAmount: 0,
        source: '',
        // 其他字段...
      },
      formRules: {
        category: [{ required: true, message: '请输入排放类别', trigger: 'blur' }],
        description: [{ required: true, message: '请描述排放类别信息', trigger: 'blur' }],
        emissionAmount: [{ required: true, message: '请输入排放总量', trigger: 'blur' }],
        source: [{ required: true, message: '请输入数据来源', trigger: 'blur' }],
        // 其他规则...
      },
      indirectEmissions: [
        // 示例间接排放数据...
        { category: '供应链排放', description: '供应商与物流环节产生的排放', emissionAmount: '...', source: '...' },
        // ...
      ],
      detailModalVisible: false,
      currentDetail: {
        // 初始化当前显示的详细信息对象
        // 根据实际业务逻辑填充具体内容
      },
    };
  },
  methods: {
    viewDetails(item) {
      this.currentDetail = { ...item };
      this.detailModalVisible = true;
    },
    editEmissionCategory(item) {
      this.currentEditItem = { ...item };
      this.editModalVisible = true;
    },
    saveDetails() {
      this.detailModalVisible = false;
    },
    closeDetailsModal() {
      this.detailModalVisible = false;
    },
    // 编辑/新增功能的相关方法实现...
    openEditModal(item = {}) {
      this.currentEditItem = { ...item };
      this.editModalVisible = true;
    },
    closeEditModal() {
      this.editModalVisible = false;
      this.$refs.editForm.resetFields();
    },
    submitEditForm() {
      this.editModalVisible=false;
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          // 提交到后端进行保存操作，根据实际情况调整
          this.updateEmissionCategory(this.currentEditItem);
          this.closeEditModal();
        } else {
          console.log('表单验证失败');
        }
      });
    },
  },
  
};
</script>

<style scoped>
.indirect-emissions-page {
  /* 页面样式 */
}
</style>